<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <style>
    i {
      font-weight: bold;
      color: red;
      margin-right: 8px;
    }

    ul {
      width: 100vw;
    }

    .input-group {
      margin-bottom: 10px;
    }

    .list-init {
      display: flex;
      justify-content: space-around;
    }

    .list-init span:nth-child(2) {
      color: red;
    }
  </style>
</head>
<body>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">搜索: </span>
  <input type="text" class="form-control" placeholder="本名" aria-describedby="basic-addon1" id="name">
</div>

<p style="display: flex;justify-content: center">

  <button class="btn btn-default" onclick="search(-1)">上一页</button>
  <button onclick="search(0)" class="btn btn-default">搜索</button>
  <button class="btn btn-default" onclick="search(1)">下一页</button>
  <button class="btn btn-default" onclick="pageToOne()">页码变1</button>

</p>

<ul class="list-group" id="list">

</ul>
<script src="./config.js"></script>
<script>
  const name = document.getElementById('name')
  const list = document.getElementById('list')
  let page = 1
  function pageToOne(){
    page = 1
  }

  function initHtml(arr) {
    let html = ''
    arr.forEach(item => {
      html += `<li class="list-group-item list-init">
      <span>${item.name}</span>
      <span>${item.id}</span>
    </li>
        `
    })
    console.log(html)
    list.innerHTML = html
  }

  function search(p) {
    console.log(p);
    page+=p
//    https://api.aipiaxi.com/api/v2/public/article/search?page=3
let url ='https://api.aipiaxi.com/api/v2/public/article/search?'
if(name.value){
    url = url + 'q=search:'+name.value+'&'
} 
url = url + 'page='+page
fetch(url).then(res=>{
    return res.json()
}).then(res=>{
    initHtml(res.items)
})
  }

//   initHtml(ben)
search(0)
</script>

</body>
</html>